/* 修改主内容区布局 */
.main-content {
    grid-template-areas:
        "pipeline database"
        "preview preview"
        "details details" !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto 1fr auto !important;
}

/* 确保流水线和数据库面板高度相同且可见 */
.pipeline-section, .database-section {
    height: 500px !important;
    min-height: 500px !important;
    overflow: auto !important;
    display: block !important;
    visibility: visible !important;
}

/* 优化数据库面板内部布局 */
.database-panel {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.db-tree {
    height: 300px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
}

.field-comparison {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
    height: calc(100% - 300px - 76px) !important; /* 总高度减去树高度和标题高度 */
}

.comparison-table {
    width: 100% !important;
}

/* 确保表头固定 */
.comparison-table thead {
    position: sticky !important;
    top: 0 !important;
    background: white !important;
    z-index: 1 !important;
}

/* 修复响应式布局问题 */
@media (max-width: 1200px) {
    .main-content {
        grid-template-areas:
            "pipeline database"
            "preview preview"
            "details details" !important;
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 992px) {
    .main-content {
        grid-template-areas:
            "pipeline database"
            "preview preview"
            "details details" !important;
        grid-template-columns: 1fr 1fr !important;
    }

    .pipeline-section, .database-section {
        height: 600px !important;
    }
}
